<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="商品名称" prop="commodityName">
            <el-input
              v-model="queryParams.commodityName"
              placeholder="请输入商品名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="商品编码" prop="commodityCoding">
            <el-input
              v-model="queryParams.commodityCoding"
              placeholder="请输入商品编码"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="销控区域" prop="pinControl">
            <el-select
              v-model="queryParams.pinControl"
              placeholder="请输入销控区域"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input
              v-model="queryParams.supplierName"
              placeholder="请输入供应商名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="search-btn">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addCommodity"
          >新增</el-button>
        </div>

        <el-table v-loading="loading" :data="tableData">
          <el-table-column label="销控区编码" align="center" prop="pinControl" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ setPinControl(statusOptions, scope.row.pinControl) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" align="center" prop="supplierName" :show-overflow-tooltip="true" />
          <el-table-column label="商品分类" align="center" prop="commodityClassify" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ selectDictLabel(spflOptions, scope.row.commodityClassify) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品编码" align="center" prop="commodityCoding" :show-overflow-tooltip="true" />
          <el-table-column label="商品名称" align="center" prop="commodityName" :show-overflow-tooltip="true" />
          <el-table-column label="品牌商标" align="center" prop="commodityLogo" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <img class="tablePic" :src="GLOBAL.MAIN_SERVER +  scope.row.commodityLogo" alt="">
            </template>
          </el-table-column>
          <el-table-column label="计量单位" align="center" prop="measureUnit" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ selectDictLabel(jldwOptions, scope.row.measureUnit) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格" align="center" prop="specification" :show-overflow-tooltip="true" />
          <el-table-column label="单价" align="center" prop="unitPrice" :show-overflow-tooltip="true" />
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="viewCommodity(scope.row)"
              >查看</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="updateCommodity(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="deleteCommodity(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <editor ref="editor" @resetQuery="resetQuery" />
  </div>
</template>

<script>
  import editor from './dialog/editor'
  import {getCommodityPage,delCommodity} from '@/api/commodity-editor/commodity';
  import GLOBAL from '@/config/config';

  export default {
    name: "commodity-editor",
    components: {
      editor
    },
    data() {
      return {
        loading: false,
        tableData: [],
        GLOBAL: GLOBAL,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          commodityName: undefined,
          commodityCoding: undefined,
          pinControl: undefined,
          supplierName: undefined
        },
        statusOptions: [],
        spflOptions: [],
        jldwOptions: [],
        total: 0
      }
    },
    created() {
      this.getList();
      this.getDicts("fo_control_area").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("fo_commodity_type").then(response => {
        this.spflOptions = response.data;
      });
      this.getDicts("fo_measure_unit").then(response => {
        this.jldwOptions = response.data;
      });
    },
    methods: {
      getList() {
        this.loading = true;
        getCommodityPage(this.queryParams).then(response => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      addCommodity() {
        this.$refs.editor.openEditor('add');
      },
      viewCommodity(row) {
        console.log(row)
        this.$refs.editor.openEditor('view', row);
      },
      updateCommodity(row) {
        console.log(row)
        this.$refs.editor.openEditor('update', row);
      },
      deleteCommodity(row) {
        delCommodity({
          id: row.id
        }).then(response => {
          if (response) {
            this.$notify({
              title: '成功',
              message: `删除 ${row.commodityName} 成功`,
              type: 'success'
            });
            this.resetQuery();
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .search-btn {
    text-align: right;
    margin: 10px 0;
  }
  .tablePic{
    max-height: 50px;
  }
</style>
